<template>
	<view class="margin-top">
		<view class="cu-form-group">
			<view class="title">{{title}}</view>
		</view>
		<view class="form-level-2">			
				<checkbox-group class="block" @change="checkboxChange" :disabled="true">
					<block v-if="showType == 'list'">
						<view class="cu-form-group" v-for="(item, index) in options" :key="item.value">
							<label class="title">{{item.text}}
								<checkbox :class="eValue.indexOf(item.value)>=0?'checked':''" :checked="eValue.indexOf(item.value)>=0?true:false" :value="item.value"></checkbox>
							</label>
						</view>
					</block>
					<block v-else>
						<label class="group-default" v-for="(item, index) in options" :key="item.value">
							{{item.text}} 
							<checkbox :class="eValue.indexOf(item.value)>=0?'checked':''" :checked="eValue.indexOf(item.value)>=0?true:false" :value="item.value"></checkbox>
						</label>
					</block>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title:{type: String},
			fld:Object,
			value: {type: [Boolean, String ,Array ,Object]}
		},
		data() {
			return {
				eValue : this.value||'',				
				eDisabled:this.fld.disabled ? true : false,
				options:this.fld.options || [],
				name:this.fld.name,
				showType:this.fld.showType || 'default',
			};
		},
		methods:{
			checkboxChange(e) {
				// console.log(e.detail.value);
				this.eValue = e.detail.value;
				this.$emit('input',e.detail.value);
			},
		}
	}
</script>

<style>
	.form-level-2 {background-color: #fff;}
	.form-level-2 .cu-form-group{padding-left: 40px;}	
	.form-level-2 label.title{width: 750upx;display: inline-block;}
	.form-level-2 label.title checkbox{float: right;}
	
	.form-level-2 .group-default{width: auto;margin: 20upx 40upx;display: inline-block;}
	.form-level-2 .group-default checkbox{margin-left: 6px;}
</style>
